<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
	</head>
	<body>
		<div class="bbs">
			<header><span onclick="showPost()">我要发帖</span></header>

			<section>
				<ul id="postList">
					<li>
						<div>
							<img src="images/tou02.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>

					<li>
						<div>
							<img src="images/tou01.jpg"></div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			</section>

			<div class="post">
				<input class="title" placeholder="请输入标题（1-50个字符）">
				所属版块：<select>
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布" onclick="release()">
			</div>
		</div>

		<script type="text/javascript">
			function showPost() {
				document.getElementsByClassName("post")[0].style.display = "block";
			}
			var touXiang = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");

			function release() {
				var title = document.getElementsByClassName("title")[0].value; //标题
				var sel = document.getElementsByTagName("select")[0].value; //版块
				var date = getDate();
				var num = Math.floor(Math.random() * 4);

				// var a = document.getElementById("postList").firstElementChild;
				// var a2 = a.cloneNode(true);
				// document.getElementById("postList").appendChild(a2);
				// confirm(a2);
				// a2.getElementsByTagName("img").setAttribute("src",touXiang[num]);
				// a2.getElementsByTagName("h1").setAttribute("value", title);
				// a2.getElementsByTagName("p").firstElementChild.setAttribute("value", "版块:" + sel);
				// a2.getElementsByTagName("p").firstElementChild.nextElementSibling.setAttribute("value", "发表时间" + date);
				
				var a = document.createElement("li");
				a.innerHTML = "<li>" + "<div>" + "<img src=\"images/" + touXiang[num] + "\">" + "</div>" + "<h1>" + title + "</h1>" +
					"<p>" + "<span>所属：" + sel + "</span>" + "<span>" +"发表时间:&nbsp;&nbsp;  "+ date + "</span>" + "</p>" + "</li>";
				document.getElementById("postList").appendChild(a);
				document.getElementsByClassName("post")[0].style.display = "none";
				
				document.getElementsByClassName("title")[0].value = "";
				document.getElementsByTagName("select")[0].value = document.getElementsByTagName("option")[0].value;
				document.getElementsByClassName("content")[0].value = "";
				
			}

			function getDate() {
				var date = new Date;
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				var hour = date.getHours();
				var minutes = date.getMinutes();
				return year + "-" + month + "-" + day + "&nbsp;" + hour + ":" + minutes;
			}
		</script>
	</body>
</html>
